$--bot-width: 300px;
$--bot-height: 240px;
$--bot-icon-size: 110px;
$--bot-action-height: 50px;
$--bot-descript-line: 3;


.bot {
  width: $--bot-width;
  height: $--bot-height;
  box-sizing: border-box;

  .content {
    height: calc(#{$--bot-height} - #{$--bot-action-height});

    .intro {
      height: $--bot-icon-size;
      display: flex;

      .icon {
        width: $--bot-icon-size;
        height: $--bot-icon-size;
        padding: 10px;
      }

      .other {
        width: calc(#{$--bot-width} - #{$--bot-icon-size});
        height: $--bot-icon-size;
        padding: 10px;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-size: 1.3em;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .author,
        .version {
          color: #555555;
        }
      }
    }

    .description {
      height: calc(#{$--bot-height} - #{$--bot-action-height} - #{$--bot-icon-size});
      box-sizing: border-box;
      color: #999999;
      padding: 10px;
      border-top: 1px dashed #dfdfdf;

      .text {
        line-height: calc((#{$--bot-height} - #{$--bot-action-height} - #{$--bot-icon-size} - 20px) / #{$--bot-descript-line});
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $--bot-descript-line;
        overflow: hidden;
      }
    }
  }

  .action {
    height: $--bot-action-height;
    border-top: 1px dashed #dfdfdf;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
}
